<mat-card class="reset-card">
  <mat-card-header>
    <mat-card-title>修改密码</mat-card-title>
    <mat-card-subtitle>修改你的密码</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content class="reset-content">
    <form [formGroup]="formModel">
      <div formGroupName="pwdGroup">
        <mat-form-field>
          <input matInput placeholder="密码" minlength="6" maxlength="30" formControlName="password"
                 [type]="hide ? 'password' : 'text'" required>
          <mat-error *ngIf="formModel.hasError('required',['pwdGroup','password'])">
            密码不能为<strong>空</strong>
          </mat-error>
          <mat-error
            *ngIf="formModel.hasError('minlength',['pwdGroup','password'])
            || formModel.hasError('maxlength',['pwdGroup','password'])">
            密码长度为<strong>6-32</strong>之间
          </mat-error>
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'隐藏密码'"
                  [attr.aria-pressed]="hide">
            <mat-icon [svgIcon]="hide ? 'visibility_off' : 'visibility'"></mat-icon>
          </button>
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="确认密码" minlength="6" maxlength="30" formControlName="passwordConfirm"
                 [type]="hide ? 'password' : 'text'" required>
          <mat-error *ngIf="formModel.hasError('required',['pwdGroup','passwordConfirm'])">
            确认密码不能为<strong>空</strong>
          </mat-error>
          <mat-error
            *ngIf="formModel.hasError('minlength',['pwdGroup','passwordConfirm'])
            || formModel.hasError('maxlength',['pwdGroup','passwordConfirm'])">
            确认密码长度为<strong>6-32</strong>之间
          </mat-error>
        </mat-form-field>
        <mat-error *ngIf="formModel.hasError('equal','pwdGroup') && formModel.get('pwdGroup').dirty">
          {{formModel.getError('equal', 'pwdGroup')?.msg}}
        </mat-error>
      </div>

      <img class="captcha-img" src="{{imgUrl}}" *ngIf="imgUrl" (click)="changeCaptcha()" alt="" matTooltip="点击刷新验证码"
           [matTooltipPosition]="'right'">

      <mat-form-field id="reset-field-captcha" style="width: 150px">
        <input matInput placeholder="验证码" formControlName="captcha" required>
        <mat-icon matSuffix svgIcon="textsms"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','captcha')">
          验证码不能为<strong>空</strong>
        </mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions align="end">
    <button *ngIf="configService.globalConfig && configService.globalConfig.loginState === true" mat-button
            color="primary" [routerLink]="'../login'">登录
    </button>
    <button mat-button color="accent" (click)="onSubmit()">
      修改
    </button>
  </mat-card-actions>
</mat-card>
